<template>
    <el-header>
      <top_menu />
    </el-header>
    <el-main>
        <div style="text-align: center;">
        <el-avatar :size="90"
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
    </div>
        <el-card style="max-width: 100%">
            <template #header>
                <div class="card-header">
                    <el-row class="row1">
                        <el-col :span="20"><el-text size="large" >用户名</el-text></el-col>
                        <el-col :span="4"><el-button type="primary" icon="Edit" /></el-col>
                    </el-row>
                    
                    
                </div>
            </template>
            <el-space direction="vertical" >
            <el-row class="row2">
                <el-text tag="b" size="large">部门：</el-text>
                <el-text size="large">暂无</el-text>
            </el-row>
            <el-row class="row2">
                <el-text tag="b" size="large">职务：</el-text>
                <el-text size="large">暂无</el-text>
            </el-row>
            <el-row class="row2">
                <el-text tag="b" size="large">班组：</el-text>
                <el-text size="large">暂无</el-text>
            </el-row>
            
        </el-space>
            <template #footer>
                <el-row class="row3">
                    <el-col :span="22">
                        <el-text size="large">
                            <el-icon><Avatar /></el-icon>
                            个人信息
                        </el-text>
                    </el-col>
                    <el-col :span="2">
                        <el-icon><ArrowRightBold /></el-icon>
                    </el-col>
                </el-row>
                <el-row class="row3">
                    <el-col :span="22">
                        <el-text size="large">
                            <el-icon><List /></el-icon>
                            人员管理
                        </el-text>
                    </el-col>
                    <el-col :span="2">
                        <el-icon><ArrowRightBold /></el-icon>
                    </el-col>
                </el-row>
                <router-link to="/">
                <el-row class="row3">
                    <el-col :span="22">
                        <el-text size="large">
                            <el-icon><SwitchButton /></el-icon>
                            退出登录
                        </el-text>
                    </el-col>
                    <el-col :span="2">
                        <el-icon><ArrowRightBold /></el-icon>
                    </el-col>
                </el-row>
                </router-link>
                
            </template>
        </el-card>
    </el-main>
    
    <el-footer></el-footer>
</template>

<script>
import top_menu from '../../components/top_menu.vue'
import { ArrowRightBold,Avatar,List,SwitchButton } from '@element-plus/icons-vue'

export default{
    components:{
        top_menu
    }
}
</script>

<style>
.row1 {
  margin-bottom: 0px;
}
.row2 {
  margin-bottom: 10px;
}
.row3 {
  margin-bottom: 20px;
}

</style>